<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta name="format-detection" content="telephone=no"/>
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"/>
  <link rel="stylesheet" type="text/css" href="css/index.css"/>
  <meta name="msapplication-tap-highlight" content="no"/>
  <title>Hello World</title>
  <style>
    button {
      font-size: 1.6em;
    }
  </style>
</head>
<body>
<div class="app">
  <h1 id="title">First page</h1>
  <div id="deviceready" class="blink">
    <p class="event listening">Connecting to Device</p>
    <p class="event received">Device is Ready</p><br/>

    <button onclick="document.location = 'kendolockdemo/index.html'">KendoUI Lock</button><br/>

    <h2>Drawer</h2>
    <button onclick="drawer('close', 'left', '#A7A7A7')">close l</button>&nbsp;&nbsp;&nbsp;&nbsp;
    <button onclick="drawer('open', 'left', 'green')">open l</button><br/>
    <button onclick="drawer('close', 'right', '#A7A7A7')">close r</button>&nbsp;&nbsp;&nbsp;&nbsp;
    <button onclick="drawer('open', 'right', 'green')">open r</button><br/>

    <h2>Slide</h2>
    <button onclick="slide('up', 'lightblue', 1, 'index.html')">up</button><br/><br/>
                                                                            <!--<button onclick="slide('left', 'red', 1, 'index.html?x=y')">left, file</button>&nbsp;&nbsp;&nbsp;&nbsp;-->
    <button onclick="slide('right', 'red', -1, '#grr')">back</button>&nbsp;&nbsp;&nbsp;&nbsp;
    <button onclick="slide('left', 'orange', 3, '#sjaak?x=1')">fwd</button><br/><br/>
    <button onclick="slide('down', 'green', -1, '#oliebol')">down</button><br/>


    <h2>Flip</h2>
    <button onclick="flip('up')">up</button><br/><br/>
    <button onclick="flip('left', 'red')">left</button>&nbsp;&nbsp;&nbsp;&nbsp;
    <button onclick="flip('right', 'green')">right</button><br/><br/>
    <button onclick="flip('down')">down</button><br/><br/>

                                                                            HTML5 fwk slide demo's:<br/>
    <button onclick="document.location = 'kendouidemo.html'">KendoUI</button>&nbsp;&nbsp;&nbsp;&nbsp;
    <button onclick="document.location = 'jqmdemo.html'">JQM</button>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

                                                                            <!--<button onclick="slide(null, 'blue')">default direction</button>-->

  </div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
  app.initialize();

  function flip(direction, color, href) {
    setTimeout(function () {
      // update the page inside this timeout
      document.querySelector("#title").innerHTML = direction;
      document.querySelector("html").style.background = color;
    }, 10);
    window.plugins.nativepagetransitions.flip({
          'backgroundColor' : "#BBBBBB",
          'direction': direction,
          'duration': 7000,
          'iosdelay': 20,
          'href': href
        },
        function () {
          console.log('------------------- flip transition finished');
        },
        function (msg) {
          alert('error: ' + msg);
        });
  }


  // demo for hooking the Android backbutton to the slide 'right'
  document.addEventListener('backbutton', function() {
    slide('right', 'purple');
  }, false);



  function slide(direction, color, slowdownfactor, hrf) {
    if (!hrf) {
      setTimeout(function () {
        // update the page inside this timeout
        document.querySelector("#title").innerHTML = direction;
        document.querySelector("html").style.background = color;
      }, 20);
    }
    // not passing in options makes the plugin fall back to the defaults defined in the JS API
    var theOptions = {
      'direction': direction,
      'duration': 2000,
      'slowdownfactor' : slowdownfactor,
      'href': hrf,
      'fixedPixelsTop' : 40, // optional, the number of pixels of your fixed header, default 0 (iOS and Android)
      'fixedPixelsBottom': 0  // optional, the number of pixels of your fixed footer (f.i. a tab bar), default 0 (iOS and Android)
    };
    window.plugins.nativepagetransitions.slide(
        theOptions,
        function () {
          console.log('------------------- slide transition finished');
        },
        function (msg) {
          alert('error: ' + msg);
        });
  }

  function drawer(action, origin, color, href) {
    // not passing in options makes the plugin fall back to the defaults defined in the JS API
    window.plugins.nativepagetransitions.drawer({
          'action': action,
          'origin': origin,
          'duration': 350,
          'href': href
        },
        function () {
          console.log('------------------- drawer transition finished');
        },
        function (msg) {
          alert('error: ' + msg);
        });
  }

  function loadJqmDemo() {
    document.location = 'jqmdemo.html';
  }

</script>
</body>
</html>
